<template>
  <div class="edit">
    <van-nav-bar
      title="我的资料"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 头像 -->
    <van-cell
      title="头像"
      style="line-height: 40px; padding-right: 10px"
      @click="editPhoto"
    >
      <template #right-icon>
        <div class="userPhoto">
          <img :src="userPortrait" alt="" v-imgerror="avatar" />
        </div>
        <i class="iconfont iconicon_more"></i>
      </template>
    </van-cell>
    <!-- 菜单列表 -->
    <div class="card">
      <van-cell
        title="昵称"
        is-link
        :value="userInfo.nickname"
        @click="editName"
      />
      <van-cell
        title="性别"
        is-link
        :value="
          userInfo.gender === 0 ? '未知' : userInfo.gender === 1 ? '男' : '女'
        "
        @click="editSex"
      />
      <van-cell title="地区" is-link :value="userInfo.area" @click="editCity" />
      <van-cell
        title="个人简介"
        is-link
        :value="userInfo.intro"
        @click="editIntro"
      />
    </div>

    <van-button plain hairline @click="exit">退出登陆</van-button>
    <EditName
      v-model="userName"
      :userInfoNickName="userInfo.nickname"
      @refreshPage="refreshPage"
    ></EditName>
    <EditSex
      v-model="userSex"
      :userInfoGender="userInfoSex"
      @refreshPage="refreshPage"
    ></EditSex>
    <EditCity v-model="userCity" @refreshPage="refreshPage"></EditCity>
    <EditIntro
      v-model="userIntro"
      :userinfoIntro="userInfo.intro"
      @refreshPage="refreshPage"
    ></EditIntro>
    <EditPhoto v-model="userPhoto"></EditPhoto>
  </div>
</template>

<script>
import EditCity from './editcity.vue'
import EditName from './editname.vue'
import EditSex from './editsex.vue'
import EditIntro from './editintro.vue'
import EditPhoto from './editPhoto.vue'
import { auInfo } from '@/api/my.js'
export default {
  name: 'info',
  data () {
    return {
      avatar: require('@/assets/common/avatar.png'),
      userName: false,
      userSex: false,
      userCity: false,
      userIntro: false,
      userPhoto: false,
      userInfo: '',
      frompath: '',
      userInfoSex: '',
      userPortrait: ''
    }
  },
  components: {
    EditName,
    EditSex,
    EditCity,
    EditIntro,
    EditPhoto
  },
  created () {
    this.$toast.loading({ message: '加载中' })
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      const res = await auInfo()
      this.$nextTick(() => {
        this.$toast.clear()
      })
      if (res.data.avatar) {
        const photoUrl = res.data.avatar.slice(1) // 图片返回地址第一个斜杠拼接基地址的时候会导致地址错误
        this.userPortrait = process.env.VUE_APP_URL + photoUrl
      }
      this.userInfo = res.data
      this.userInfoSex = res.data.gender + ''
    },
    onClickLeft () {
      const lastPage = this.$route.params.lastPage || '/'
      this.$router.push(lastPage)
    },
    //  重新获取页面数据(刷新)
    refreshPage () {
      this.getUserInfo()
    },
    // 退出移出token并且跳转到/
    exit () {
      localStorage.removeItem('userToken')
      this.$router.push('/')
    },

    // 打开对应的弹窗
    editName () {
      this.userName = true
    },
    editSex () {
      this.userSex = true
    },
    editCity () {
      this.userCity = true
    },
    editIntro () {
      this.userIntro = true
    },
    editPhoto () {
      this.userPhoto = true
    }
  }
}
</script>

<style lang="less" scoped>
.van-cell {
  width: 690px;
  height: 120px;
  background: #ffffff;
  border-radius: 16px;
  font-size: 30px;
  color: #181a39;
  margin: 36px auto 0;
  .userPhoto img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: right;
    overflow: hidden;
  }
}
.iconicon_more {
  padding: 0 20px;
}
.card {
  width: 690px;
  height: 440px;
  background: #ffffff;
  border-radius: 16px;
  margin: 0 auto;
}
::v-deep .van-nav-bar__content {
  background-color: #fff;
}
.van-button--hairline {
  border-color: red;
  margin: 260px auto;
  width: 300px;
  display: block;
  color: red;
}
.van-cell__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
